import "./index.css"; // 防跳功能
import { message, Switch } from "antd";
import { NavLink, Route, useHistory } from "react-router-dom";
import axios from "./service/index";
import React, { useState, useEffect } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from "@ant-design/icons";
import { Layout, Menu, theme } from "antd";
import Welcome from "./views/Welcome";
import User from "./views/User";
import Film from "./views/Film";
import Cinema from "./views/Cinema";
import College from "./views/College";

const { Header, Sider, Content } = Layout;

export default function App() {
  let history = useHistory();
  let [isLogin, setLogin] = useState(false); // isLogin 登录的状态
  let [items, setItems] = useState([]);
  let navMenus = JSON.parse(localStorage.getItem("acl"));
  const getItem = (label, key, icon, children) => {
    return {
      key, // 菜单项的key，唯一值
      icon, // icon图标
      children, // 子菜单项目
      label, // 菜单项的内容
    };
  };
  // 动态生成菜单项
  let tempArr = [];
  if (navMenus) {
    navMenus.forEach((item) => {
      if (item.children.length > 0) {
        // 有子菜单
        tempArr.push(
          getItem(
            item.auth_name,
            item.auth_path,
            <UserOutlined />,
            item.children.map((subItem) => {
              if (subItem.is_nav === 1) {
                // 要渲染的导航菜单项目
                return getItem(
                  <NavLink to={subItem.auth_path}>{subItem.auth_name}</NavLink>
                );
              }
            })
          )
        );
      } else {
        // 无子菜单
        tempArr.push(
          getItem(
            <NavLink to={item.auth_path}>{item.auth_name}</NavLink>,
            item.auth_path
          )
        );
      }
    });
  }
  useEffect(() => {
    axios.get("/api/common/auth/jwtPreCheck").then((res) => {
      if (res.errNo === 0) {
        message.info(res.message, 1);
        setLogin(true); // 登录成功之后，设置登录的状态为 true
        // setItems([...tempArr])
      } else {
        message.error(res.errText);
        history.push("/login"); // 没有登录需要跳转到登录页面
      }
    });
  });
  const [collapsed, setCollapsed] = useState(false); // 控制导航条的展开折叠
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const quit = () => {
    history.push("/login");
  };

  return (
    <>
      {isLogin && (
        <Layout style={{ height: "100%" }}>
          <Sider
            trigger={null}
            collapsible
            collapsed={collapsed}
            style={{ height: "100%" }}
          >
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={["1"]}
              items={
                [
                {
                  key: "1",
                  icon: <UserOutlined />,
                  label: <NavLink to="/dashboard/welcome">欢迎页面</NavLink>,
                },
                {
                  key: "2",
                  icon: <VideoCameraOutlined />,
                  label: "用户管理",
                  children: [
                    {
                      key: "2-1",
                      icon: <VideoCameraOutlined />,
                      label: (
                        <NavLink to="/dashboard/user/index">用户列表</NavLink>
                      ),
                    },
                  ],
                },
                {
                  key: "3",
                  icon: <UploadOutlined />,
                  label: "电影管理",
                  children: [
                    {
                      key: "3-1",
                      icon: <UploadOutlined />,
                      label: (
                        <NavLink to="/dashboard/film/index">电影列表</NavLink>
                      ),
                    },
                  ],
                },
                {
                  key: "4",
                  icon: <UploadOutlined />,
                  label: "影院管理",
                  children: [
                    {
                      key: "4-1",
                      icon: <UploadOutlined />,
                      label: (
                        <NavLink to="/dashboard/cinema/index">影院分布</NavLink>
                      ),
                    },
                  ],
                },
                {
                  key: "5",
                  icon: <UploadOutlined />,
                  label: "院校管理",
                  children: [
                    {
                      key: "5-1",
                      icon: <UploadOutlined />,
                      label: (
                        <NavLink to="/dashboard/college/index">
                          院校分布
                        </NavLink>
                      ),
                    },
                  ],
                },
              ]
            }
            />
          </Sider>
          <Layout className="site-layout">
            <Header
              style={{
                padding: "0px 10px",
                background: colorBgContainer,
              }}
            >
              {React.createElement(
                collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                {
                  className: "trigger",
                  onClick: () => setCollapsed(!collapsed),
                }
              )}
              {/* {
                collapsed?<MenuUnfoldOutlined onClick={ () => setCollapsed(!collapsed)} />:<MenuFoldOutlined onClick={ () => setCollapsed(!collapsed)}  />
              } */}
              <span
                style={{ float: "right", padding: "0px 30px" }}
                onClick={quit}
              >
                注销登录
              </span>
            </Header>
            <Content>
              <Switch>
                <Route path="/dashboard/welcome" component={Welcome} />
                <Route path="/dashboard/user/index" component={User} />
                <Route path="/dashboard/film/index" component={Film} />
                <Route path="/dashboard/cinema/index" component={Cinema} />
                <Route path="/dashboard/college/index" component={College} />
              </Switch>
            </Content>
          </Layout>
        </Layout>
      )}
    </>
  );
}
